<template>
	<view class="center dirCloumn content">
		<view class="top">
			<view class="center mb-30 pic">
				<image src="../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="cffd33a f38 bold text">鐵盒專案管理系統</view>
		</view>
		<view class="mb-40 loginbox">
			<u-input class="input" :show-confirmbar="false" v-model="email" maxlength=64 type="text" placeholder="account" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
			<u-input class="input" :show-confirmbar="false" :password-icon="false" v-model="password" maxlength=16 type="password" placeholder="password" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
			<view class="end forget" @click="forget"><text class="text f24">忘记密码?</text></view>
		</view>
		<view class="flex mb-20 loginbtn">
			<view class="item ce6 center f26 login" @click="toLogin">login</view>
			<view class="item ce6 center f26 reg" @click="toReg">Register</view>
		</view>
		<view class="f32 desc">幸福藏在細節裡</view>
		
		
		<u-popup v-model="regshow" mode="bottom" border-radius="16rpx" 
		:safe-area-inset-bottom="true">
			<view class="widths regbox">
				<view class="list">
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="account" color="#d2e7ff" size="34"></u-icon>
							<text class="ml-6 c666">名稱</text>
						</view>
						<view class="val">
							<u-input class="input" input-align="right" :show-confirmbar="false" v-model="regInfo.username" maxlength=32 type="text" placeholder="name" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						
						<view class="center lebel">
							<u-icon name="lock" color="#d2e7ff" size="34"></u-icon>
							<text class="ml-10 c666">密碼</text>
						</view>
						<view class="val">
							<u-input class="input" :password-icon="false" input-align="right" :show-confirmbar="false" v-model="regInfo.password" maxlength=16 type="password" placeholder="password" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="email" color="#d2e7ff" size="30"></u-icon>
							<text class="ml-10 c666">信箱</text>
						</view>
						<view class="val">
							<u-input class="input" input-align="right" :show-confirmbar="false" v-model="regInfo.email" maxlength=64 type="text" placeholder="email" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="phone" color="#d2e7ff" size="34"></u-icon>
							<text class="ml-10 c666">電話</text>
						</view>
						<view class="val">
							<u-input class="input" input-align="right" :show-confirmbar="false" v-model="regInfo.mobile" maxlength=10 type="text" placeholder="mobile" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="map" color="#d2e7ff" size="36"></u-icon>
							<text class="ml-10 c666">地址</text>
						</view>
						<view class="val">
							<u-input class="input" input-align="right" :show-confirmbar="false" v-model="regInfo.address" maxlength=100 type="text" placeholder="address" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					
					<view class="flex item">
						<view class="center lebel">
							<u-icon name="grid" color="#d2e7ff" size="36"></u-icon>
							<text class="ml-10 c666">公司</text>
						</view>
						<view class="val">
							<u-input class="input" input-align="right" :show-confirmbar="false" v-model="regInfo.company" maxlength=100 type="text" placeholder="company" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
				</view>
				<view class="center btnbox">
					<view class="center cfff btn" @click="subReg">提交</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import { login , registerUser } from "@/api/apis.js"
	var passwordRegex = /^[a-zA-Z0-9_]{6,16}$/;
	export default {
		data() {
			return {
				email: '',
				password:'',
				regshow:false,
				regInfo:{
					username:"",
					password:"",
					email:"",
					mobile:"",
					address:"",
					company:"",
				}
			}
		},
		onShow(){
			// const userAgent = navigator.userAgent.toLowerCase();
			// const mobileKeywords = ["iphone", "android", "windows phone"];
			// const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
			// if(!isMobile){
			// 	this.$Toast("请在移动端打开应用")
			// }
		},
		onLoad() {

		},
		
		methods: {
			...mapMutations(['changeUserIdent','changeUserName']),
			toLogin(){
				if(!this.email){
					this.$Toast("帳戶不能為空")
					return false;
				}
				if(!this.$u.test.email(this.email)){
					this.$Toast("請輸入正確的帳戶")
					return false;
				}
				if(!this.password){
					this.$Toast("密碼不能為空")
					return false;
				}
				if(!passwordRegex.test(this.password)){
					this.$Toast("密碼僅支持字母、數字及_,長度6-16位")
					return false;
				}
				this.$Loading("登錄中")
				login({email:this.email,password:this.password}).then((res)=>{
					uni.setStorageSync("uid",res.user_id);
					uni.setStorageSync("userToken",res.token);
					uni.setStorageSync("ident",res.ident)
					uni.setStorageSync("islogin",true)
					uni.setStorageSync("name",res.name)
					uni.setStorageSync("vtoken",res.vtoken)
					uni.setStorageSync("bindevice",res.bindevice)
					this.changeUserIdent(res.ident)
					this.changeUserName(res.name)
					this.email=""
					this.password=""
					
					//跳轉到主頁
					this.$navi({
					    route:{
					        name:'Main',
					    },
						isTab:true,
					})
				}).catch((err)=>{
					this.$Toast(err.msg)
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			toReg(){
				this.regshow=true;
			},
			forget(){
				this.toPage('Forget')
			},
			subReg(){
				if(!this.regInfo.username){
					this.$Toast("名稱不能為空")
					return false;
				}
				if(!this.regInfo.password){
					this.$Toast("密碼不能為空")
					return false;
				}
				if(!passwordRegex.test(this.regInfo.password)){
					this.$Toast("密碼僅支持字母、數字及_,長度6-16位")
					return false;
				}
				if(!this.regInfo.email){
					this.$Toast("信箱不能為空")
					return false;
				}
				if(!this.$u.test.email(this.regInfo.email)){
					this.$Toast("請輸入正確的信箱")
					return false;
				}
				if(!this.regInfo.mobile){
					this.$Toast("電話不能為空")
					return false;
				}
				if(!/^09\d{8}$/.test(this.regInfo.mobile)){
					this.$Toast("請輸入正確的電話")
					return false;
				}
				if(!this.regInfo.address){
					this.$Toast("地址不能為空")
					return false;
				}
				if(!this.regInfo.company){
					this.$Toast("公司不能為空")
					return false;
				}
				registerUser(this.regInfo).then((res)=>{
					this.regshow=false;
					this.$Toast(res.msg)
					this.regInfo={
						username:"",
						password:"",
						email:"",
						mobile:"",
						address:"",
						company:"",
					}
				}).catch((err)=>{
					this.$Toast(err.msg)
				})
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #007aff;
	}
	.content{
		background-color: #007aff !important;
		width: 100vw;
		height: 100vh;
		.top{
			.pic{
				width: 238rpx;
				height: 238rpx;
				margin: 40rpx auto;
				/deep/ uni-image{
					width: 100%  !important;
					height: 100% !important;
				}
			}
			.text{
				letter-spacing: 4rpx;
			}
		}
		.loginbox{
			margin-top: 120rpx;
			.input{
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				width: 420rpx;
				/deep/ .uni-input-input,/deep/.uni-input-placeholder{
					padding: 0 20rpx !important;
				}
			}
			.forget{
				position: relative;
				top: -8rpx;
				color: #dedede;
				transform: scale(0.9);
				.text{
					border-bottom: 2rpx solid #dedede;
				}
				
			}
		}
		.loginbtn{
			width: 380rpx;
			.item{
				width: 140rpx;
				height: 65rpx;
				&.reg{
					background-color: #0e6ce1;
					border-radius: 10rpx;
				}
			}
		}
		.desc{
			color: #5dabff;
			padding-bottom: 80rpx;
		}
		/deep/ .u-drawer-content{
			border-radius: 20rpx 20rpx 0 0 !important;
		}
		.regbox{
			padding: 30rpx 20rpx;
			border-radius: 16rpx 16rpx 0 0;
			.list{
				.item{
					width: 100%;
					padding: 4rpx 0;
					border-bottom: 2rpx solid #f9f9f9;
					.lebel{
						width: 120rpx;
						position: relative;
						// padding-left: 20rpx;
						// &::before{
						// 	content: "";
						// 	width: 8rpx;
						// 	height: 34rpx;
						// 	background-color: #007aff;
						// 	display: inline-block;
						// 	border-radius: 8rpx;
						// 	position: absolute;
						// 	left: 0;
						// 	top:2rpx;
						// 	box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, .15);
						// }
					}
					.val{
						width: calc(100% - 130rpx);
						margin-left: 10rpx;
					}
				}
			}
			.btnbox{
				padding: 120rpx 0 180rpx 0;
				.btn{
					background: linear-gradient(#007aff,#0e6ce1);
					width: 200rpx;
					height: 70rpx;
					border-radius: 10rpx;
				}
			}
			
		}
	}
</style>
